<template>
	<a-row style="margin-top:1em">
		<!-- <a-card title="CIFS" hoverable> -->
		<NoAuthPage v-showNoAuth="'D19-1'" :imgBoxStyle="{ height: '40vh', margin: '0 10px 10px' }" />

		<div v-userAuth="'D19-1'">
			<div style="margin:0 0 1em 0 ">
				<a-tooltip placement='bottom' v-userAuth="'D19-3'">
					<template slot='title'>
						<span>{{ $t('Create') }}</span>
					</template>
					<a-button type="primary" @click="createu = true">
						<!-- icon='file-add' -->
						<!-- <i class="icon icon-new16f"></i> -->
						<Iconfont class="icon" type="icon-new16f"></Iconfont>
					</a-button>
				</a-tooltip>
				<a-tooltip placement='bottom' v-userAuth="'D19-3'">
					<template slot='title'>
						<span>{{ $t('Change-pwd') }}</span>
					</template>
					<a-button :disabled="selectedRowKeys2.length == 0" type='primary' style="margin-left:1em"
						@click="openmodal2('modify')">
						<!-- icon='key' -->
						<!-- <i class="icon icon-password16f"></i> -->
						<Iconfont class="icon" type="icon-password16f"></Iconfont>
					</a-button>
				</a-tooltip>
				<!-- <a-tooltip placement='bottom'>
            <template slot='title'>
                <span>{{$t('Quota')}}</span>
            </template>
            <a-button type='primary' class="quato" style="margin-left:1em" @click="openmodal2('setsize')">
                <a-icon :component="quota"/>
            </a-button>
        </a-tooltip> -->
				<a-tooltip placement='bottom' v-userAuth="'D19-3'">
					<template slot='title'>
						<span>{{ $t('Set-access-path') }}</span>
					</template>
					<a-button :disabled="selectedRowKeys2.length == 0" type='primary' style="margin-left:1em"
						@click="openmodal2('setpath')">
						<!-- <a-icon :component="setp"/> -->
						<!-- <i class="icon icon-catalogue16f1"></i> -->

						<Iconfont class="icon" type="icon-catalogue16f1"></Iconfont>
					</a-button>
				</a-tooltip>
				<a-tooltip placement='bottom' v-userAuth="'D19-3'">
					<template slot='title'>
						<span>{{ $t('Edit-access-auth') }}</span>
					</template>
					<a-button :disabled="selectedRowKeys2.length == 0" type='primary' style="margin-left:1em"
						@click="openmodal2('editauth')">
						<!-- <a-icon :component="setp"/> -->
						<!-- <i class="icon icon-catalogueedit16f"></i> -->

						<Iconfont class="icon" type="icon-catalogueedit16f"></Iconfont>
					</a-button>
				</a-tooltip>
				<a-tooltip placement='bottom' v-userAuth="'D19-3'">
					<template slot='title'>
						<span>{{ $t('Remove-access-path') }}</span>
					</template>
					<a-button :disabled="selectedRowKeys2.length == 0" type='danger' style="margin-left:1em;"
						@click="openmodal2('delpath')">
						<!-- background-color: #ff4d4f;border:none -->
						<!-- <a-icon :component="delp"/> -->
						<!-- <i class="icon icon-cataloguedel16f"></i> -->
						<Iconfont class="icon" type="icon-cataloguedel16f"></Iconfont>
					</a-button>
				</a-tooltip>
				<a-tooltip placement='bottom' v-userAuth="'D19-3'">
					<template slot='title'>
						<span>{{ $t('Delete') }}</span>
					</template>
					<a-button :disabled="selectedRowKeys2.length == 0" type='danger' style="margin-left:1em"
						@click="openmodal2('deluser')">
						<!-- icon='close-circle' -->
						<!-- <i class="icon icon-error16f"></i> -->
						<Iconfont class="icon" type="icon-error16f"></Iconfont>
					</a-button>
				</a-tooltip>
			</div>

			<a-table class="bigstyle" :loading="loading2" :columns='cifscolumns' rowKey='user' :dataSource='cifsdata'
				:pagination='pagination' size='small'
				:rowSelection='{ type: "radio", selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2 }' bordered
				:locale="defaultSetting">
				<span slot="action" slot-scope="text, record">
					<a-tooltip placement='bottom'>
						<a-switch defaultChecked @change='onChange' />
					</a-tooltip>
				</span>
			</a-table>
		</div>
		<!-- </a-card> -->
		<!-- 用户操作 -->
		<a-modal :title="$t('Change-pwd')" v-model="modify" @cancel='cancelhandle' @ok="edituerok"
			:cancelText="$t('Cancel')" :okText="$t('Sure')" width="38%" v-dragModal>
			<a-spin size="large"
				style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
				tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form4'>
				<a-form-item :label="$t('User') + $t('Name')" v-bind="formlayout">
					<a-input v-decorator="['user', {
						rules: [{ required: true, message: $t('Enter') + $t('User') + $t('Name') }, { pattern: namePattern, message: $t('Not_enter_special_characters') }], initialValue: target2
					}]" :placeholder="$t('Enter') + $t('User') + $t('Name')" disabled />
				</a-form-item>
				<a-form-item :label="$t('Password')" v-bind="formlayout">
					<a-input-password v-decorator="['pwd', {
						rules: [
							{ required: true, message: $t('Enter') + $t('Password') },
							{ validator: validateToNextPassword },
							{ pattern: /^[^\s\u4e00-\u9fa5]{6,20}$/, message: $t('Password_rule_prompt') }
						]
					}]" :placeholder="$t('Enter') + $t('Password')" />
				</a-form-item>
				<a-form-item :label="$t('Sure') + $t('Password')" v-bind="formlayout">
					<a-input-password v-decorator="['cpwd', {
						rules: [
							{ required: true, message: $t('Confirm_pwd_again') },
							{ validator: compareToFirstPassword },
							{ pattern: /^[^\s\u4e00-\u9fa5]{6,20}$/, message: $t('Password_rule_prompt') }
						]
					}]" @blur="handleConfirmBlur" :placeholder="$t('Enter') + $t('Password')" />
				</a-form-item>
			</a-form>
		</a-modal>
		<!--设置访问路径-->
		<a-modal v-if='cifsone !== ""' :title="$t('Set-access-path')" v-model="setpath" @ok="setok"
			:cancelText="$t('Cancel')" :okText="$t('Sure')" @cancel='cancelhandle2' v-dragModal>
			<a-spin size="large"
				style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
				tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form5'>
				<a-form-item :label="$t('Path')" v-bind='lang == "zh" ? formlayout : formlayout2' has-feedback>
					<a-select v-decorator="['path', {
						rules: [{ required: true, message: $t('Choose') + $t('Path') }]
					}]" :placeholder="$t('Choose') + $t('Path')">
						<!-- <a-select-opt-group :label="item.fs_name" v-for="(item,index) in $store.state.baseshare" :key="index">
							<a-select-option :value="item.fs_name+'./'+k"  v-for="(k, i) in $store.state.baseshare[index].children" :key="i">{{k}}</a-select-option>
						</a-select-opt-group> -->
						<a-select-option :value="k" v-for="(k, i) in $store.state.baseshare"
							:key="i">{{ k }}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item :label="$t('Access-permission')" v-bind="lang == 'zh' ? formlayout : formlayout2">
					<a-select v-decorator="['access_type', {
						rules: [{ required: true, message: $t('Choose') + $t('Access-permission') }]
					}]" :placeholder="$t('Choose') + $t('Access-permission')">
						<a-select-option value='RO'>{{ $t('Read_only') }}</a-select-option>
						<a-select-option value='RW'>{{ $t('Read_and_write') }}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
		<!--编辑访问权限-->
		<a-modal :title="$t('Edit-access-auth')" v-model="editauth" @ok="setAuth" :cancelText="$t('Cancel')"
			:okText="$t('Sure')" @cancel='cancelhandle3'>
			<a-spin size="large"
				style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%"
				tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form7'>
				<a-form-item :label="$t('Path')" v-bind='lang == "zh" ? formlayout : formlayout2' has-feedback>
					<a-select v-decorator="['path', {
						rules: [{ required: true, message: $t('Choose') + $t('Path') }],
						initialValue: currentTarget.path
					}]" :placeholder="$t('Choose') + $t('Path')" disabled>
						<!-- <a-select-opt-group :label="item.fs_name" v-for="(item,index) in $store.state.baseshare" :key="index">
							<a-select-option :value="item.fs_name+'./'+k"  v-for="(k, i) in $store.state.baseshare[index].children" :key="i">{{k}}</a-select-option>
						</a-select-opt-group> -->
						<a-select-option :value="k" v-for="(k, i) in $store.state.baseshare"
							:key="i">{{ k }}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item :label="$t('Access-permission')" v-bind="lang == 'zh' ? formlayout : formlayout2">
					<a-select v-decorator="['access_type', {
						rules: [{ required: true, message: $t('Choose') + $t('Access-permission') }],
						initialValue: currentTarget.access_type ? currentTarget.access_type : undefined
					}]" :placeholder="$t('Choose') + $t('Access-permission')">
						<a-select-option value='RO'>{{ $t('Read_only') }}</a-select-option>
						<a-select-option value='RW'>{{ $t('Read_and_write') }}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
		<!-- <a-modal :title="$t('Delete')+$t('User')" v-model="deluser" @ok="deluserok" :cancelText="$t('Cancel')" :okText="$t('Sure')">	
        	<a-spin size="large" style="position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);z-index:1;background:rgba(255,255,255,.6);padding:10%" tip="Submit successfully Loading..." v-if="spinning == true"></a-spin>
			<a-form :form='form6'>
				<a-form-item :label="$t('Choose')" v-bind="formlayout">
					{{$t('Sure-del')}}
					<a-radio-group v-decorator="['is_complete',{
							rules:[
								{required:true,message:'请选择是否完全删除'}
							]
						}]"  >
						<a-radio value="true">{{$t('Yes')}}</a-radio>
                        <a-radio value="false">{{$t('No')}}</a-radio>
					</a-radio-group>
				</a-form-item>
	      	</a-form>
	    </a-modal> -->
		<Cuser :cu='createu' @omodal='changemodal'></Cuser>
	</a-row>
</template>
<script>
// import quota from '../../../../static/images/svg/ic_quota_normal.svg'
// import setp from '../../../../static/images/svg/ic_catalogue_normal.svg'
// import delp from '../../../../static/images/svg/ic_catalogue_del.svg'
import Cuser from './filepro/createuser'
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'

import request from '@/request/request'

export default {
	name: 'Cifs',
	// template: '<a-icon :component="quota,delp,setp" />',
	components: { Cuser, EmptyData, NoAuthPage },
	data() {
		return {
			form4: this.$form.createForm(this),
			form5: this.$form.createForm(this),
			form6: this.$form.createForm(this),
			form7: this.$form.createForm(this),
			// quota,
			// delp,
			// setp,
			cifsdata: [],
			selectedRowKeys2: [],
			loading2: true,
			createu: false,
			modify: false,
			setpath: false,
			editauth: false,
			delpath: false,
			// deluser:false,
			spinning: false,
			cifsone: '',
			oldsize: '',
			oldunit: '',
			target2: '',
			cifscolumns: [
				{ title: this.$t('User'), dataIndex: 'user', key: 'user', sorter: (a, b) => a.user.length - b.user.length },
				// {title:'IP',dataIndex:'addr',key:'addr',sorter:(a,b)=>a.addr.length - b.addr.length},
				{ title: this.$t('Path'), dataIndex: 'path', key: 'path', sorter: (a, b) => a.path.length - b.path.length, scopedSlots: { customRender: 'path' } },
				{ title: this.$t('Access-permission'), dataIndex: 'access_type', key: 'access_type', sorter: (a, b) => a.access_type.length - b.access_type.length },
				// {title: this.$t('File-quota'),dataIndex:'max_files',key:'max_files',sorter:(a,b)=>a.max_files.length - b.max_files.length},
				// {title: this.$t('Capacity-quota'),dataIndex:'max_bytes',key:'max_bytes',sorter:(a,b)=>a.max_bytes.length - b.max_bytes.length},
				// {title: this.$t('Proportion'),dataIndex:'percent',key:'percent',sorter:(a,b)=>a.percent.length - b.percent.length},
				// {title: this.$t('Connection')+this.$t('Status'),dataIndex:'status',key:'status',sorter:(a,b)=>a.status.length - b.status.length},
				// {title: '是否导出NFS',key: 'action',scopedSlots: { customRender: 'action' }}
			],
			pagination: {
				defaultPageSize: 5,
				showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
				showSizeChanger: true,
				pageSizeOptions: ['5', '10', '15', '20'],
				onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
				buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
			},
			formlayout: {
				labelCol: { span: 6 },
				wrapperCol: { span: 18 }
			},
			formlayout2: {
				labelCol: { span: 8 },
				wrapperCol: { span: 16 }
			},
			uint: [{ val: 'KiB', label: 'KiB' }, { val: 'MiB', label: 'MiB' }, { val: 'GiB', label: 'GiB' }, { val: 'TiB', label: 'TiB' }],
			currentTarget: '',
			lang: this.$store.state.language,
			defaultSetting: { emptyText: <EmptyData /> }
		}
	},
	computed: {
		getlanguage() {
			return this.$store.state.language
		}
	},
	watch: {
		getlanguage(val) {
			this.lang = val;
			this.cifscolumns = [
				{ title: this.$t('User'), dataIndex: 'user', key: 'user', sorter: (a, b) => a.user.length - b.user.length },
				// {title:'IP',dataIndex:'addr',key:'addr',sorter:(a,b)=>a.addr.length - b.addr.length},
				{ title: this.$t('Path'), dataIndex: 'path', key: 'path', sorter: (a, b) => a.path.length - b.path.length, scopedSlots: { customRender: 'path' } },
				{ title: this.$t('Access-permission'), dataIndex: 'access_type', key: 'access_type', sorter: (a, b) => a.access_type.length - b.access_type.length },
				// {title: this.$t('File-quota'),dataIndex:'max_files',key:'max_files',sorter:(a,b)=>a.max_files.length - b.max_files.length},
				// {title: this.$t('Capacity-quota'),dataIndex:'max_bytes',key:'max_bytes',sorter:(a,b)=>a.max_bytes.length - b.max_bytes.length},
				// {title: this.$t('Proportion'),dataIndex:'percent',key:'percent',sorter:(a,b)=>a.percent.length - b.percent.length},
				// {title: this.$t('Connection')+this.$t('Status'),dataIndex:'status',key:'status',sorter:(a,b)=>a.status.length - b.status.length},
				// {title: '是否导出NFS',key: 'action',scopedSlots: { customRender: 'action' }}
			]
		}
	},
	mounted() {
		this.getcifsdata()
	},
	methods: {
		getcifsdata() {
			this.loading2 = true
			request('get', 'cephfs/samba/').then(res => {
				// console.log('cifs表格列表', res);
				// for(var i=0;i<res.data.length;i++){
				// 	// res.data[i].percent = res.data[i].percent*100 +'%'
				// 	if(res.data[i].max_bytes == -1){
				// 		res.data[i].max_bytes = 0
				// 	}else{
				// 		res.data[i].max_bytes = this.bytesToSize(res.data[i].max_bytes)
				// 	}
				// 	if(res.data[i].max_files == -1){
				// 		res.data[i].max_files = 0
				// 	}
				// }
				if (res.data.flag == 1) {
					this.model(res.data.id) //返回模板
					this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
				} else {
					this.cifsdata = res.data
					this.updateCurrentTarget();
				}
			}).catch(err => {
				// this.loading2 = false;
			}).finally(() => {
				this.loading2 = false;
			})
		},
		changemodal(val, isCancel) {
			this.createu = val;
			if (!isCancel) {
				this.getcifsdata();
			}
		},
		onSelectChange2(selectedRowKeys2, selectedRows) {
			this.target2 = selectedRowKeys2.join();
			this.currentTarget = selectedRows[0];
			for (let i = 0; i < this.cifsdata.length; i++) {
				if (this.target2 == this.cifsdata[i].user) {
					this.num = i
					this.cifsone = this.cifsdata[i]
					try {
						this.oldsize = this.cifsone.max_bytes.split(' ')[0]
						this.oldunit = this.cifsone.max_bytes.split(' ')[1]
					} catch {
						this.oldsize = 0
						this.oldunit = ''
					}
					this.ips = this.cifsdata[i].addr
				}
			}
			this.selectedRowKeys2 = selectedRowKeys2
		},
		openmodal2(name) {
			if (this.selectedRowKeys2.length !== 0) {
				this.cifsone = this.cifsdata[this.num]
				this.ips = this.cifsdata[this.num].addr
				if (name == 'modify')
					this.modify = true
				else if (name == 'setpath') {
					this.setpath = true
				}
				else if (name == 'editauth') {
					this.editauth = true;
				}
				else if (name == 'delpath') {
					this.delpathok()
				}
				else if (name == 'deluser')
					this.deluserok()
			}
			else {
				this.$notification['error']({
					message: this.$t('Choose') + this.$t('Operating-object')
				})
			}
		},
		//修改密码
		edituerok(e) {
			e.preventDefault();
			this.form4.validateFields((err, value) => {
				if (!err) {
					this.spinning = true
					request('post', 'cephfs/samba/update', {
						// addr:this.ips,
						user: value.user,
						pwd: value.pwd
					}).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.spinning = false
						this.modify = false
						this.form4.resetFields();
					}).catch(err => {
						this.spinning = false;
						this.modify = false;
						this.form4.resetFields();
					})
				}
			})
		},
		//设置访问路径
		setok(e) {
			e.preventDefault();
			this.form5.validateFields((err, value) => {
				if (!err) {
					this.spinning = true
					request('post', 'cephfs/samba/shared', {
						// addr:this.ips,
						user: this.target2,
						// shared:{
						// fs_name:value.path.split('.')[0],
						// path:value.path.split('.')[1],
						path: value.path,
						access_type: value.access_type,
						// }
					}).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.getcifsdata()
						this.spinning = false
						this.setpath = false
						this.form5.resetFields();
					}).catch(err => {
						this.spinning = false;
						this.setpath = false;
						this.form5.resetFields();
					})
				}
			})
		},
		//编辑访问权限
		setAuth() {
			this.form7.validateFields((err, value) => {
				if (!err) {
					this.spinning = true
					request('post', 'cephfs/samba/editPermission', {
						user: this.target2,
						access_type: value.access_type,
					}).then(res => {
						this.model(res.data.id) //返回模板
						this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// this.gettask()  //任务栏信息
						this.getcifsdata()
						this.spinning = false
						this.editauth = false
						this.form7.resetFields();
					}).catch(err => {
						this.spinning = false;
						this.editauth = false;
						this.form7.resetFields();
					})
					this.selectedRowKeys2 = [];
				}
			})
		},
		//去除访问路径
		delpathok() {
			let _this = this
			this.$confirm({
				title: this.$t('Remove-access-path'),
				content: this.$t('Sure-to-del') + this.$t('Path') + ": " + this.target2 + ' ？',
				cancelText: this.$t('Cancel'),
				okText: this.$t('Sure'),
				okType: 'danger',
				onOk() {
					request('post', 'cephfs/samba/unshared', {
						// addr:_this.ips,
						user: _this.target2
					}).then(res => {
						_this.model(res.data.id) //返回模板
						_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
						// _this.gettask()  //任务栏信息
						_this.getcifsdata()
					})
				},
				onCancel() {
					// console.log('cancel')
				}
			})
		},
		//删除cifs用户
		deluserok() {
			let _this = this
			if (this.currentTarget.path == '') {
				this.$confirm({
					title: this.$t('Delete') + this.$t('User'),
					content: this.$t('Sure-to-del') + this.$t('User') + ": " + this.target2 + ' ？',
					cancelText: this.$t('Cancel'),
					okText: this.$t('Sure'),
					okType: 'danger',
					onOk() {
						request('DELETE', 'cephfs/samba/', {
							// data:{
							// addr:_this.ips,
							user: _this.target2
							// }
						}).then(res => {
							_this.model(res.data.id) //返回模板
							_this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
							// _this.gettask()  //任务栏信息
							_this.getcifsdata();
							_this.selectedRowKeys = []; // 将选择的项清空
						})
					},
					onCancel() {
						// console.log('cancel')
					}
				})
			} else {
				this.$notification['error']({
					message: this.$t('Remove-share-path')
				});
			}
		},

		// deluserok(e){
		// 	e.preventDefault();
		// 	this.form6.validateFields((err,value)=>{
		//         if(!err){
		// 			this.spinning = true
		// 			if(value.is_complete == 'true'){
		// 				value.is_complete = true
		// 			}else{
		// 				value.is_complete = false
		// 			}
		// 			this.$axios.delete(this.allurl+'cephfs/user',{
		// 				data:{
		// 					addr:this.ips,
		// 					user:this.target2,
		// 					is_complete:value.is_complete
		// 				}
		// 			}).then(res=>{
		// 				console.log('kkkkkkkkk')
		// 				this.spinning = false
		// 				this.model(res.data.id) //返回模板
		//                 this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
		// 				this.gettask()  //任务栏信息
		// 				this.form6.resetFields();
		// 				this.deluser=false
		// 				this.getcifsdata()

		// 			})
		//         }
		// 	})
		// },
		handleConfirmBlur(e) {
			const value = e.target.value;
			this.confirmDirty = this.confirmDirty || !!value;
		},
		compareToFirstPassword(rule, value, callback) {
			const form = this.form4;
			if (value && value !== form.getFieldValue('pwd')) {
				callback(this.$t('Pwd-error'));
			} else {
				callback();
			}
		},
		validateToNextPassword(rule, value, callback) {
			const form = this.form4;
			if (value && this.confirmDirty) {
				form.validateFields(['confirm'], { force: true });
			}
			callback();
		},
		cancelhandle(e) {
			this.spinning = false
			this.form4.resetFields();
			this.form5.resetFields();
			this.form6.resetFields();
		},
		cancelhandle2() {
			this.form5.resetFields();
		},
		cancelhandle3() {
			this.form7.resetFields();
		},

		//操作完后更新当前选中的表格项
		updateCurrentTarget() {
			if (this.currentTarget != '') {
				this.cifsdata.some(item => {
					if (item.user == this.currentTarget.user) {
						this.currentTarget = item;
						return true;
					}
				})
			}
		}
	}
}
</script>
